<template>
  <div class="common-header clearfix">
    <ul class="router-list clearfix">
      <!-- <li><img src="/static/images/icon-jcxx.png"/>基础信息</li>
          <li><img src="/static/images/icon-ssxx.png"/>实时信息</li> -->
      <li @click="showRegimen">
        <img src="/static/images/icon-zyyb.png" />作业预报
      </li>
      <!-- <li><img src="/static/images/icon-jgtj.png"/>结果统计</li> -->
      <li @click="showAutoWarn">
        <img src="/static/images/icon-autoSetting.png" />自动预报
      </li>
      <li style="position:relative;">
        <img src="/static/images/icon-fagl.png" />方案管理
        <dl class="dropDown">
          <dd @click="showPlanDetailDialog">方案查询</dd>
          <dd @click="showPlanManageDialog">创建方案</dd>
        </dl>
      </li>
      <!-- <li><img src="/static/images/icon-sqfw.png"/>水情服务</li> -->
    </ul>
    <div class="user-box">
      <!-- <div class="enter-menage">管理端</div>
          <div class="user"><img src="/static/images/icon-user.png" alt="">admin</div>
          <div class="btn-log-out">退出</div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  props: [''],
  data() {
    return {}
  },
  filters: {},
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    //作业预报
    showRegimen() {
      this.$store.state.showWarningDialog = true
      this.$store.state.showSearchFrom = false
      this.$store.state.showRankForm = false
      this.$store.state.showReportDialog = false
      this.$store.state.showAutoWarn = false
      this.$store.state.showPlanManage = false
      this.$store.state.showPlanDetail = false
    },
    //自动预报
    showAutoWarn() {
      this.$store.state.showAutoWarn = true
      this.$store.state.showWarningDialog = false
      this.$store.state.showSearchFrom = false
      this.$store.state.showRankForm = false
      this.$store.state.showReportDialog = false
      this.$store.state.showPlanManage = false
      this.$store.state.showPlanDetail = false
    },
    //方案管理--方案查询
    showPlanDetailDialog() {
      this.$store.state.modulesSrc = 'planDetail'
      this.$store.state.showAutoWarn = false
      this.$store.state.showWarningDialog = false
      this.$store.state.showSearchFrom = false
      this.$store.state.showRankForm = false
      this.$store.state.showReportDialog = false
      this.$store.state.showPlanManage = false
      this.$store.state.showPlanDetail = true
    },
    //方案管理--创建方案
    showPlanManageDialog() {
      this.$store.state.modulesSrc = 'planManage'
      this.$store.state.showAutoWarn = false
      this.$store.state.showWarningDialog = false
      this.$store.state.showSearchFrom = false
      this.$store.state.showRankForm = false
      this.$store.state.showReportDialog = false
      this.$store.state.showPlanManage = true
      this.$store.state.showPlanDetail = false
    },
  },
  watch: {},
}
</script>
<style lang="less">
.common-header {
  width: 100%;
  height: 79px;
  background: url('/static/images/bg-header.png') no-repeat center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  .router-list {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin-left: 532px;
    li {
      cursor: pointer;
      float: left;
      width: 139px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #2bc0cd;
      margin-right: 15px;
      background: url('/static/images/btn-router.png') no-repeat center;
      img {
        vertical-align: middle;
        margin: -4px 6px 0 0;
      }
      .dropDown {
        width: 170px;
        height: 90px;
        background: url('/static/images/planManage/dropdown.png') no-repeat
          center;
        position: absolute;
        top: 40px;
        left: -20px;
        dd {
          font-size: 20px;
          color: #00fffc;
          &:nth-child(1) {
            margin-top: 5px;
          }
        }
      }
    }
  }
  .user-box {
    float: right;
    margin-right: 12px;
    margin-top: 14px;
    div {
      float: left;
    }
    .enter-menage {
      width: 108px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      color: #00fffc;
      font-size: 20px;
      border-radius: 16px;
      background-color: #073565;
    }
    .user {
      color: #fff;
      line-height: 32px;
      margin: 0 12px 0 20px;
      img {
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .btn-log-out {
      width: 52px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      color: #3177c6;
      font-size: 14px;
      border-radius: 4px;
      background-color: #063360;
    }
  }
}
</style>
